<template>
  <scroll-container>
    <!-- v-if -->
    <div>
      <h6 class="margin-xs">
        <a-popover placement="left" :overlayStyle="{ maxWidth: '300px' }" :destroyTooltipOnHide="true">
          <mpd-icon class="cursor-pointer margin-r-xs" icon="mpd-icon-question" style="font-size: 14px"></mpd-icon>
          <template #content>
            <div style="word-wrap: break-word">该值会放入eval中执行</div>
          </template>
        </a-popover>
        <span>是否渲染</span>
        <span class="text-color-gray text-size-sm">(v-if)</span>
      </h6>
      <a-input v-model="selectPageNodeDom[actionItem.selectItemKey].mpdConfig.vIf" />
    </div>
    <!-- v-show -->
    <div>
      <h6 class="margin-xs">
        <a-popover placement="left" :overlayStyle="{ maxWidth: '300px' }" :destroyTooltipOnHide="true">
          <mpd-icon class="cursor-pointer margin-r-xs" icon="mpd-icon-question" style="font-size: 14px"></mpd-icon>
          <template #content>
            <div style="word-wrap: break-word">该值会放入eval中执行</div>
          </template>
        </a-popover>
        <span>是否显示</span>
        <span class="text-color-gray text-size-sm">(v-show)</span>
      </h6>
      <a-input v-model="selectPageNodeDom[actionItem.selectItemKey].mpdConfig.vShow" />
    </div>
    <!-- Class -->
    <div>
      <h6 class="margin-xs">
        <a-popover placement="left" :overlayStyle="{ maxWidth: '300px' }" :destroyTooltipOnHide="true">
          <mpd-icon class="cursor-pointer margin-r-xs" icon="mpd-icon-question" style="font-size: 14px"></mpd-icon>
          <template #content>
            <div style="word-wrap: break-word">
              绑定到`class`属性上的字段`${}`表达式取对应变量，原理是用计算属性 computed 实现的，所以要加
              this，比如：${this.mpdPageValue.arg1} ${this.mpdPageValue.arg2 === '1'?'class1':''}
            </div>
          </template>
        </a-popover>
        <span>Class</span>
      </h6>
      <a-textarea
        v-model="selectPageNodeDom[actionItem.selectItemKey].mpdConfig.class"
        placeholder="可输入多个类名"
        :rows="4"
      />
    </div>
    <!-- Style -->
    <key-value-manage v-model="selectPageNodeDom[actionItem.selectItemKey].mpdConfig.style" :keyEnum="CssKeyMiunsJson">
      <template #title>
        <a-popover placement="left" :overlayStyle="{ maxWidth: '300px' }" :destroyTooltipOnHide="true">
          <mpd-icon class="cursor-pointer margin-r-xs" icon="mpd-icon-question" style="font-size: 14px"></mpd-icon>
          <template #content>
            <div style="word-wrap: break-word">
              直接书写原生`style`样式，比如`[{key:'color',value:'#000000'}]`会转换为`{color:'#000000'}`，其中key和value都支持
              `${}`表达式取对应变量，原理是用计算属性 computed 实现的，所以要加this，
              比如：${this.mpdPageValue.arg1}、${this.mpdPageValue.arg2 === '1'?'styleValue1':''}
            </div>
          </template>
        </a-popover>
        <span>Style</span>
      </template>
    </key-value-manage>
  </scroll-container>
</template>

<script>
import CssKeyMiunsJson from '@/json/css/css-key-minus'
import KeyValueManage from '../components/KeyValueManage.vue'

export default {
  components: {
    KeyValueManage
  },
  props: {
    actionItem: {
      type: Object,
      required: true
    }
  },
  inject: ['selectPageNodeDom'],
  data() {
    return {
      CssKeyMiunsJson
    }
  }
}
</script>
